<template>
  <header>
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3272722_99b2pj1jcfl.css"
    />
    <!-- search -->
    <div class="search">
      <div class="ipt">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="输入搜索关键词" />
      </div>
      <div class="saoma">
        <span class="iconfont icon-iconfontscan"></span>
        <span>扫一扫</span>
      </div>
    </div>
    <!-- search -->

    <!-- tags -->
    <div class="tags">
      <span class="title">热搜:</span>
      <div><span>面膜补水</span></div>
      <div><span>进口零食</span></div>
      <div><span>夏季衣服</span></div>
      <div><span>果汁饮料</span></div>
    </div>
    <!-- tags -->

    <!-- banner -->
    <div class="banner">
      <Swiper :data="lbts"></Swiper>
    </div>
    <!-- banner -->
  </header>
</template>

<script>
export default {
  components: {
    Swiper: () => import("@/components/swiper/Index.vue"),
  },
  data() {
    return {
      lbts: [
        {
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/116909/36/22018/132790/6231b19bE4a18baf8/8271ce6d7444ff93.jpg!cr_1053x420_4_0!q70.jpg",
        },
        {
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/88716/39/25395/127129/6237e29dEd18620a2/a89719cbbde0cc32.jpg!cr_1053x420_4_0!q70.jpg",
        },
        {
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/158663/39/21332/140763/62306b6fEefdd24b9/71c72bfe4b6d5862.jpg!cr_1053x420_4_0!q70.jpg",
        },
        {
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/98056/31/22320/376124/621845deEdb5e617e/826350eac32fcd27.jpg!cr_1125x449_0_166!q70.jpg",
        },
        {
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/197950/3/20875/297357/6238ccb5E3ab8c03c/875c7bc3c835cbe7.jpg!cr_1125x449_0_166!q70.jpg",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 363px;
  background-color: #f9b278;
  padding: 0 32px;
  padding-top: 35px;
  box-sizing: border-box;

  // search
  .search {
    width: 100%;
    height: 61px;
    display: flex;
    justify-content: space-between;

    // ipt
    .ipt {
      width: 627px;
      height: 61px;
      background: #ffffff;
      border-radius: 30px;
      display: flex;
      align-items: center;

      .icon-sousuo {
        color: #b2b2b2;
        font-size: 30px;
        margin-left: 29px;
        margin-right: 20px;
      }
      input {
        width: 540px;
        height: 27px;
        font-size: 28px;
        color: #999999;
        border: none;
      }
      input::-webkit-input-placeholder {
        color: #999999;
      }
    }

    // saoma
    .saoma {
      color: #fff;
      text-align: center;

      .icon-iconfontscan {
        font-size: 30px;
        display: block;
        margin-bottom: 7px;
      }

      span:nth-of-type(2) {
        width: 52px;
        height: 18px;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }

  // tags
  .tags {
    width: 100%;
    height: 43px;
    margin-top: 23px;
    margin-bottom: 22px;
    display: flex;

    .title {
      font-size: 28px;
      color: #ffffff;
    }

    div {
      width: 130px;
      text-align: center;
      height: 43px;
      line-height: 43px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 21px;
      margin-left: 17px;

      span {
        font-size: 24px;
        color: #ffffff;
        display: inline-block;
      }

      &:nth-of-type(1) {
        margin-left: 19px;
      }
    }
  }

  // banner
  .banner {
    width: 100%;
    height: 288px;
    background-color: green;
    border-radius: 10px;
  }

  // ...
}
</style>
